<template>
	<view class="buy-chick-madal u-flex u-col-center u-row-center">
		<view class="chick-madal-content">
			<image src="../../static/images/icon_close@2x.png" mode="" @click="hide" class="close-icon"></image>
			<view class="">
				<view class="u-flex u-col-center u-margin-bottom-30 u-row-between">
					<view class="icon_more" @click="nextSwiper"><image src="../../static/images/icon_more1@2x.png" mode=""></image></view>
					<view class="u-flex-6">
						<u-swiper @change="swiperChange" :mcurrent="swiperCurrent" height="170" :list="list" mode="none" :effect3d="true" :autoplay="false"></u-swiper>
					</view>
					<view class="icon_more" @click="pervSwiper"><image src="../../static/images/icon_more2@2x.png" mode=""></image></view>
				</view>
				<view class="u-flex u-col-center u-text-center u-row-center u-margin-top-30">
					<view class="u-font-32 ">复活小鸡</view>
					<view class="u-font-36 color-F75F53">￥10.00</view>
					<view class="u-font-28 color-666666">元/只</view>
				</view>
				<view class="u-flex u-col-center u-row-center u-margin-top-36">
					<view class="u-flex u-flex-col u-row-center u-col-center u-font-28 u-margin-right-36">
						<view class="">复活</view>
						<view class="">数量</view>
					</view>
					<u-number-box v-model="value" :min="1" :max="vuex_user.vuex_revive_num" :disabled-input="true" :input-width="100" :input-height="62" size="36" color="#FFFFFF" bg-color="#F5B340" @change="valChange"></u-number-box>
				</view>
				<view class="u-margin-top-58 u-flex u-col-center  u-row-between">
					<u-button
						:hair-line="falses"
						:customStyle="{
							width: '140rpx',
							height: '70rpx',
							background: '#BDBDBD',
							border: '4rpx solid #959595',
							borderRadius: '20rpx',
							fontSize: '36rpx',
							color: '#FFFFFF'
						}"
						@click="hide"
					>
						放弃
					</u-button>
					<u-button
						:hair-line="falses"
						:customStyle="{
							width: '240rpx',
							height: '70rpx',
							background: 'rgba(245,179,64,1)',
							border: '4rpx solid rgba(204,126,43,1)',
							borderRadius: '20rpx',
							fontSize: '32rpx',
							color: '#FFFFFF'
						}"
						@click="revive"
					>
						<view class="u-font-36 color-F34D40">
							￥{{amount}}
						</view>
						 复活
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// mcurrent 需要在 'node_modules/uview-ui/components/u-swiper'下添加props：mcurrent，设置轮播图current
export default {
	name: 'revival-chick-madal',
	data() {
		return {
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			value: 1,
			swiperCurrent: 0,
			amount:0
		};
	},
	created() {
		this.value = this.vuex_revive_num
		this.amount = this.vuex_revive_num*10
	},
	methods: {
		hide() {
			this.$emit('showRevivalChickMadal');
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
			this.computeTotalPrice()
		},
		nextSwiper() {
			if (!this.swiperCurrent) {
				return;
			}
			--this.swiperCurrent;
			// console.log(this.swiperCurrent)
		},
		pervSwiper() {
			if (this.swiperCurrent === this.list.length - 1 || this.swiperCurrent > this.list.length - 1) {
				return;
			}
			++this.swiperCurrent;
			// console.log(this.swiperCurrent)
		},
		swiperChange(index) {
			this.swiperCurrent = index;
			// console.log(this.swiperCurrent)
		},
		computeTotalPrice() {
			this.amount =Number(this.value)*10
		},
		revive(){
			let params = {
				num:this.value,
				amount:this.amount
			}
			this.$u.api.reviveChicken(params).then(res=>{
				if(res.errno === "000"){
					uni.getProvider({
						service: 'payment',
						success: (payres) => {
							console.log(payres)
							//在这里进行业务逻辑处理
							if (payres.errMsg === "getProvider:ok" && payres.provider[0] === "wxpay") {
								//微信支付
								uni.requestPayment({
									provider: payres.provider[0],
									timeStamp: res.result.data.timeStamp, //订单数据
									nonceStr: res.result.data.nonceStr,
									package: res.result.data.package,
									signType: res.result.data.signType,
									paySign: res.result.data.paySign,
									success: (res) => {
										//处理业务逻辑
										uni.showToast({
											icon: 'none',
											title: '支付成功'
										});
										this.$u.vuex("vuex_revive_num",new this.$BigNumber(this.vuex_user.vuex_revive_num).minus(this.value))
										this.$emit('showRevivalChickMadal');
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											icon: 'none',
											title: '支付失败'
										});
									},
								})
					
							} else {
								this.$u.toast("调用支付失败")
							}
						}
					});
				}
			}).catch(err=>{
				console.log(err);
			})
		}
	}
};
</script>

<style>
.buy-chick-madal {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 1007;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
}
.chick-madal-content {
	width: 502rpx;
	height: 640rpx;
	background: rgba(255, 255, 255, 1);
	border: 4rpx solid rgba(167, 92, 26, 1);
	border-radius: 20rpx;
	position: relative;
	overflow: hidden;
	padding: 52rpx 45rpx;
	padding-top: 60rpx;
	box-sizing: border-box;
}
.close-icon {
	width: 148rpx;
	height: 140rpx;
	position: absolute;
	right: -68rpx;
	top: -60rpx;
}
.icon_more {
	width: 34rpx;
	height: 40rpx;
}
.icon_more image {
	width: 100%;
	height: 100%;
}
.u-numberbox {
	border: 2rpx solid #f5b340 !important;
}
</style>
